<template>
	<view>
		<mvBar :mysNavConfig="mysNavConfig" @onLeftClick="onLeftClick"></mvBar>
		<view class="u-search-box  cssBox">
			<view class="u-search-inner">
				<u-search v-model="searchKeyword" @change="search" shape="round" :clearabled="true" :show-action="true"
					actionText="新增" @custom="gotoAdd" input-align="left">
				</u-search>
			</view>
		</view>
		<uni-list v-for="(item,index) in pointList" :key="item.pointRealId">
			<u-swipe-action>
				<u-swipe-action-item :options="options" @click="click(item)">
					<uni-list-item direction="column" :note="item.description">
						<template v-slot:header>
							<view class="uni-title">{{item.name}}</view>
							<view class="uni-thumb uni-content list-picture">
								<u-swiper :list="item.picUrl" :autoplay="false" height="200" :circular="true">
								</u-swiper>
							</view>
						</template>
						<template v-slot:footer>
							<view class="uni-footer">
								<view class="cu-tag bg-olive light round" @click="goEdit(item.pointRealId)">编辑信息</view>
								<view class="cu-tag bg-orange light round" @click="goFeature(item)">指标管理
								</view>
							</view>
						</template>
					</uni-list-item>
				</u-swipe-action-item>
			</u-swipe-action>
		</uni-list>
		<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
			:nomore-text="nomoreText" bgColor="#f2f2f2"></u-loadmore>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				options: [{
					text: '删除',
					icon: 'trash-fill',
					iconSize: '20',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				mysNavConfig: {
					/* 占位开启  */
					navPadding: true,
					/* 背景 */
					bgColor: "#0055ff",
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "测点列表",
						color: "#ffffff",
						fontSize: "18px", // px upx rpx
						fontWeight: "500", // 100 - 700
					},
					btnType: "type2",
					isCustomFn: true,
					type2Config: {
						// 左图标
						leftPath: "/static/img/back.png",
						// 右图标
						rightPath: "/static/img/home.png",
						// 圆角
						radius: "40rpx",
					}
				},
				userInfo: '',
				pointList: [],
				searchKeyword: '',
				pageSize: 6,
				equipmentRealId: '',
				loadStatus: 'loadmore',
				pageIndex: 1,
				count: 6,
				loadingText: '加载中...',
				loadmoreText: '上拉加载更多',
				nomoreText: '无数据'
			};
		},
		onLoad(option) {
			this.equipmentRealId = option.equipmentRealId;
			uni.request({
				url: getApp().globalData.serverAddress + this.$uri.Uri_getEquipment.replace("{userRealId}", this
						.userInfo.userRealId)
					.replace("{equipmentRealId}", this.equipmentRealId),
				dataType: "json",
				method: "GET",
				success: (res) => {
					var nametitle = res.data.data.name + "-测点"
					if (nametitle.length > 10) {
						this.mysNavConfig.navTitle.text = nametitle.slice(0, 10) + '...'
					} else {
						this.mysNavConfig.navTitle.text = nametitle
					}
				}
			})
			this.userInfo = uni.getStorageSync('userInfo');
			this.getPointList();
		},
		methods: {
			onReachBottom() {
				this.loadStatus = "loadmore";
				if (this.count < this.pageSize) {
					this.loadStatus = "nomore";
				} else {
					setTimeout(() => {
						this.loadStatus = "loading";
						this.pageSize += 6;
						this.getPointList();
					}, 1000);
				}
			},
			getPointList() {
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_getPointList.replace("{userRealId}",
							this.userInfo.userRealId)
						.replace("{equipmentRealId}", this.equipmentRealId),
					data: {
						page: this.pageIndex,
						limit: this.pageSize,
						name: this.searchKeyword
					},
					dataType: "json",
					method: "GET",
					success: (res) => {
						for (let items of res.data.data) {
							var arr = []
							for (let val of items.picUrl) {
								arr.push(getApp().globalData.serverAddress + val)
							}
							items.picUrl = arr
						}
						this.count = res.data.count
						this.pointList = res.data.data
						if (this.count < this.pageSize) {
							this.loadStatus = "nomore";
						}
					},
					fail(res) {
						console.log(res);
					}
				})
			},
			search() {
				this.getPointList()
			},
			gotoAdd() {
				uni.redirectTo({
					url: '/pages/equipments/addPoint?equipmentRealId=' + this.equipmentRealId
				})
			},
			goEdit(value) {
				uni.redirectTo({
					url: '/pages/equipments/editPoint?pointRealId=' + value + '&equipmentRealId=' + this
						.equipmentRealId
				})
			},
			//指标管理
			goFeature(value) {
				uni.redirectTo({
					url: '/pages/equipments/featureList?pointRealId=' + value.pointRealId + '&equipmentRealId=' +
						this.equipmentRealId
				})
			},
			onLeftClick() {
				uni.redirectTo({
					url: '/pages/equipments/equipmentList'
				})
			},
			//删除
			click(value) {
				uni.showModal({
					title: '温馨提示',
					content: '删除测点会同时删除测点下的所有采集记录，并且不可恢复，是否确认删除？',
					success: res => {
						if (res.confirm) {
							uni.request({
								url: getApp().globalData.serverAddress + this.$uri.Url_deletedetection
									.replace("{userRealId}",
										this.userInfo.userRealId).replace("{equipmentRealId}",
										value.equipmentRealId).replace("{pointRealId}",
										value.pointRealId),
								dataType: "json",
								method: "POST",
								success: (resData) => {
									uni.showToast({
										title: '删除成功',
										icon: 'success',
										duration: 1000
									});
									this.getPointList();
								},
								fail: (resData) => {
									uni.showToast({
										title: 'resData.data.msg',
										icon: 'error',
										duration: 2000
									});
								}
							})

						}
					}
				})
			}
		},
		onPullDownRefresh() {
			this.pageSize = 6;
			this.getPointList();
			uni.stopPullDownRefresh();
		}
	};
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.cssBox {
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		margin-bottom: 15rpx;
	}

	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.content {
		width: 100%;
		display: flex;
	}

	.list-picture {
		width: 100%;
		height: 145px;
	}

	.thumb-image {
		width: 100%;
		height: 100%;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
